<template>
  <div>
    <div class="content2-shop">
      <p>购物车</p>
      <p>
        <span><van-icon name="delete-o" /></span> <span>清空购物车</span>
      </p>
    </div>
    <!-- 循环计算属性中返回的arr,就是商品数量大于0的数组数据,这样当商品数据为零的时候自动从购物车页面消失 -->
    <div
      class="content2-container"
      v-for="item in $store.getters.newShopData"
      :key="item.id"
    >
      <p class="content2-container-kind">{{ item.name }}</p>
      <span class="content2-container-price"
        >&yen;{{ item.num * item.price }}</span
      >
      <p>
        <button
          class="goods-addGoods"
          @click="$store.commit('changeNum', { id: item.id, num: -1 })"
        >
          -
        </button>
        <span class="goods-numGoods"> {{ item.num }} </span>
        <button
          class="goods-addGoods"
          @click="$store.commit('changeNum', { id: item.id, num: 1 })"
        >
          +
        </button>
      </p>
    </div>
    <!-- <h1  @click="chnageNameall()">{{changeName}}</h1> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_goodsList } from "@/api/info"; //这里不行的时候就是用@
@Component
export default class ShopCar extends Vue {
  // 计步器的值
  value: any = 0;
  //随便定义的name
  get changeName(): any {
    return this.$store.state.name;
  }

  //点击弹出框改名
  /*  chnageNameall() {
    this.$store.commit("changeName", "张卓购物车");
  } */
  //计算属性共享数据
  get X_allList(): any {
    return this.$store.state.goodsListAll;
  }
  //获取种类数据
  async getList() {
    let res: any = await $_goodsList();
    console.log(res.goodsList);
    this.$store.commit("changeListAll", res.goodsList);
  }

  //生命周期
  created(): void {
    //获取种类数据
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/theme";
.goods-numGoods {
  font-size: 16px;
  margin: 0 10px;
}
.goods-addGoods {
  background-color: $active;
  border: none;
  width: 22px;
  line-height: 22px;
  border-radius: 50%;
  font-size: 16px;
}
.van-action-sheet {
  color: $active;
}
.van-action-sheet__header {
  background-color: rgb(254, 231, 200);
}
.content2 {
  padding: 16px 16px 160px;
  color: black;
  font-size: 14px;

  .content2-shop {
    display: flex;
    justify-content: space-between;
    span {
      color: rgb(193, 193, 193);
    }
  }
  .content2-container {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    .content2-container-kind {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      text-align: left;
    }
    .content2-container-price {
      margin: 0 20px;
      flex: 1;
      color: $active;
    }
    .van-stepper {
      width: 83px;
    }
  }
} //点击按钮弹出框样式
</style>